<template>
	<view style="display: flex;flex-direction: row;height: 100vh;background-color: #eaeaea;">
		<!-- 搜素框 -->
		<div style="display: flex;flex-direction: column;width: 100%;">
		<div style="display: flex;justify-content: center;background-color: #ffffff;height: 100rpx;align-items: center;">
			<input type="text" value="Q新鲜,搜索一下就出来了" style="border: 1rpx solid;width: 90%;height: 65rpx;
			background-color: #ffffff; border-radius: 30rpx;padding-left: 30rpx;">
		</div>
		<!-- 今日推荐 -->
			<div style="width: 100%;height: 60rpx; background-color: #ffffff;display: flex;
			flex-direction: row;justify-content: space-around;">
				<div v-for="(item,index) in wod" :key="index">
					<div @click="hh(index,item)" :class='{abc : index==fuk}' style="height: 50rpx;
					width: 150rpx;text-align: center;">
						{{item.quandan}}
						</div>
				</div>
			</div>
			<!-- 猪肉 -->
			<div style="display: flex;justify-content: center;background-color: #ffffff;height: 220rpx;align-items: center;">
				<div style="width: 90%;height: 200rpx;background-color: #ffffff;display: flex;justify-content: center;">
					<img src="/static/猪肉.png" style="width: 95%;height: 200rpx;">
				</div>
			</div>
			<!-- 商品 -->
			<div class="hj1">
				<div class="yr">
					<div v-for="(item,index) in jk" :key="index">
						<span
							style="padding: 5rpx;display: flex;flex-direction: row;align-items: center;">
							<div >
								<img :src="item.jksn" style="width: 140rpx;height: 140rpx;border-radius: 40rpx;">
							</div>
							<div style="width: 80%;padding: 5%;">
								<span style="font-size: 80%;">
									{{item.yrf}}
								</span>
								<div style="">
									<div style="color: #757575;font-size: 60%;">
									{{item.yuro}}
									</div>
								<div style="display: flex;flex-direction: row;font-size: 80%;margin-top: 5%;">
									{{item.wuyuan}}
									<div style="margin-left: 420rpx;">
										<img :src="item.gomai" style="width: 40rpx;height: 40rpx;">
									</div>
								</div>
								</div>
							</div>
						</span>
					</div>
				</div>
				<div class="yr">
					<div v-for="(item,index) in jk" :key="index">
						<span
							style="padding: 5rpx;display: flex;flex-direction: row;align-items: center;">
							<div >
								<img :src="item.jksn" style="width: 140rpx;height: 140rpx;border-radius: 40rpx;">
							</div>
							<div style="width: 80%;padding: 5%;">
								<span style="font-size: 80%;">
									{{item.yrf}}
								</span>
								<div style="">
									<div style="color: #757575;font-size: 60%;">
									{{item.yuro}}
									</div>
								<div style="display: flex;flex-direction: row;font-size: 80%;margin-top: 5%;">
									{{item.wuyuan}}
									<div style="margin-left: 420rpx;">
										<img :src="item.gomai" style="width: 40rpx;height: 40rpx;">
									</div>
								</div>
								</div>
							</div>
						</span>
					</div>
				</div>
				<div class="yr">
					<div v-for="(item,index) in jk" :key="index">
						<span
							style="padding: 5rpx;display: flex;flex-direction: row;align-items: center;">
							<div >
								<img :src="item.jksn" style="width: 140rpx;height: 140rpx;border-radius: 40rpx;">
							</div>
							<div style="width: 80%;padding: 5%;">
								<span style="font-size: 80%;">
									{{item.yrf}}
								</span>
								<div style="">
									<div style="color: #757575;font-size: 60%;">
									{{item.yuro}}
									</div>
								<div style="display: flex;flex-direction: row;font-size: 80%;margin-top: 5%;">
									{{item.wuyuan}}
									<div style="margin-left: 420rpx;">
										<img :src="item.gomai" style="width: 40rpx;height: 40rpx;">
									</div>
								</div>
								</div>
							</div>
						</span>
					</div>
				</div>
<!-- 				<div>
					<dir style="background-color: aqua;width: 100rpx;height: 100rpx;
					position: fixed;bottom: 1rpx;"></dir>
				</div> -->
			</div>
			</div>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				fuk:0,
				
				wod:[
					{id:0,quandan:'今日推荐'},
					{id:1,quandan:'时尚短袖'},
					{id:2,quandan:'今日爆火'},
					{id:3,quandan:'今日必买'}
				],
				jk: [
					{ jksn: 'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', yrf: '羽绒服',yuro:'羽绒服', wuyuan: '$5', gomai: '/static/add.png' }
				],
			}
		},
		methods: {
			hh(index,item){
				this.fuk=index
				
			}
		}
	}
</script>

<style>
	.abc{
		border-bottom: 5rpx solid ;
		color: #ffaa00;
	}
	.hj1{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 600rpx;
		background-color: #ffffff;
		
		align-items: center;
		
	}
	.yr {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 90%;
		height: 180rpx;
		background-color: #ffffff;
		justify-content: center;
		
	}
	
	.yr {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 90%;
		height: 180rpx;
		background-color: #ffffff;
		justify-content: center;
	}
	.yr {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 90%;
		height: 180rpx;
		background-color: #ffffff;
		justify-content: center;
	}
</style>